
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.css"/>
    <style type="text/css">
    	.mui-table-view{
    		margin-top: 44px;
    	}
    </style>
</head>
<body>
	<!--<header class="mui-bar mui-bar-nav">
	    <h1 id="header-title" class="mui-title">音乐列表</h1>
	</header>-->
	<header class="mui-bar mui-bar-nav">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">内地音乐榜单</h1>
	</header>
    <!--下拉刷新容器-->
    <audio src="http://ws.stream.qqmusic.qq.com/201308159.m4a?fromtag=46" autoplay=""></audio>
    
    <!--音乐列表-->
    <ul id="musiclist" class="mui-table-view">
        <!--<li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30"/>
                <div class="mui-media-body">
            		幸福	
                    <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
                </div>
            </a>
        </li>-->
        
    </ul>
    <script src="js/template-web.js" type="text/javascript"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/html" id="tpl-li">
    	<%for(var i=0; i<20; i++){%>
    		 
            <li data-url= <%= data[i].url %> class="mui-table-view-cell mui-media">
	            <a href="javascript:;" class="mui-navigate-right">
	                <img class="mui-media-object mui-pull-left" src="<%= data[i].albumpic_small %>"/>
	                <div class="mui-media-body">
	                    <%= data[i].songname %>
	                    <p class="mui-ellipsis"><%= data[i].singername %></p>
	                </div>
	            </a>
       		</li>
    	<%}%>
    </script>
    <script type="text/javascript">
    	mui.init();
    	
		mui.get(
				'http://route.showapi.com/213-4',
				{
					showapi_appid:'36622',
					showapi_sign:'aae9915511a540a2a30e22775929a9e8',
					topid:5				
				},
				function(res){
					if(res&&res.showapi_res_code==0){
						var data = res.showapi_res_body.pagebean.songlist;
						var lis = template('tpl-li',{data:data});
						$("#musiclist").append(lis);
//						mui('#refreshContainer').pullRefresh().endPullupToRefresh();
					}else {
			    		mui.alert(res.showapi_res_error);
			    	}
//					mui('#refreshContainer').pullRefresh().endPullupToRefresh();
				},
				'json'
		)
//		mui.plusReady(function(){
		mui('#musiclist').on('tap','li',function(){
  				var url = this.getAttribute('data-url');
//				console.log(1111);
  				$('audio').attr('src',url);
      				
      	})
//		})
		/*$(function(){
			$('#musiclist').on('click','li',function(){
				var url = $(this).data('url');
				$('audio').attr('src',url);
			})
		})*/
		
    </script>
</body>
</html>
